<template>
  <div class="score_statistic">
    <div class="header">
      <describe-box
        v-for="d in describers"
        :key="d.key"
        :describer="d"
      ></describe-box>
    </div>
    <div id="score_container" class="container">
      <left-right-structure>
        <pie v-if="pieData" :pieData="pieData" slot="left"></pie>
        <bar
          v-if="horizontalBarData"
          :barData="horizontalBarData"
          slot="right"
        ></bar>
      </left-right-structure>
    </div>
  </div>
</template>

<script>
import DescribeBox from "@/components/data_analysis/DescribeBox.vue";
import LeftRightStructure from "@/components/LeftRightStructure.vue";
import Pie from "@/components/data_analysis/graphs/Pie.vue";
import Bar from "@/components/data_analysis/graphs/Bar.vue";

export default {
  name: "ScoreStatistic",
  components: {
    DescribeBox,
    LeftRightStructure,
    Pie,
    Bar,
    MultiLine: () => import("@/components/data_analysis/graphs/MultiLine"),
  },
  data() {
    return {
      specialDescriber: { icon: "share", key: "课程名", value: "数据结构" },
      contentChoose: {
        icon: "share",
        key: "仿真/理论",
        value: "theory",
        options: [
          { label: "理论", value: "theory" },
          { label: "仿真", value: "fz" },
        ],
      },
      // TODO:这些项要结合后端
      describers: [
        {
          icon: "share",
          key: "课程代码",
          value: "13515161",
        },
        {
          icon: "share",
          key: "教师",
          value: "李四",
        },
        {
          icon: "share",
          key: "班级",
          value: "201901",
        },
        {
          icon: "share",
          key: "专业",
          value: "软件工程",
        },
      ],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      tableData: null,
      pieData: null,
      horizontalBarData: null,
      lineData: null,
      formTemplate: [
        {
          prop: "title",
          label: "考试名称",
        },
        {
          prop: "start_time",
          label: "时间",
        },
        {
          prop: "score",
          label: "分数",
        },
        {
          prop: "class_rank",
          label: "班级排名",
        },
        {
          prop: "standardScore",
          label: "标准成绩",
        },
      ],
    };
  },
  computed: {
    currentContent() {
      return this.contentChoose.value;
    },
  },
  mounted() {
    // TODO:这里要获取数据
    this.$http.get(`${this.$reqPrefix}/theory/dis?student_id=2`).then((res) => {
      // console.log(res.data.data);
      this.pieData = res.data.data.pieData;
      this.horizontalBarData = res.data.data.horizontalBarData;
    });
    // TODO:这里要获取数据
    this.$http
      .get(`${this.$reqPrefix}/theory/stat?student_id=2`)
      .then((res) => {
        // console.log(res.data.data);
        this.lineData = res.data.data.graphData;
        this.tableData = res.data.data.tableData;
      });
  },
};
</script>

<style lang='less' scoped>
.score_statistic {
  height: 100%;
  .header {
    height: 60px;
    padding: 0 20px;
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
    background-color: #05154c;
    describe-box {
      margin-left: 20px;
      &:nth-child(1) {
        margin-left: 0;
      }
    }
  }
  .container {
    height: calc(100% - 70px);
  }
}
</style>